import { Modal, Radio, Input,Button } from 'antd';
import React from 'react';
import './Modal.css'



// 点击查看时的模态框
function Handle(props) {
    const { TextArea } = Input;
    // 查看模态框默认隐藏
    const [visible, setVisible] = React.useState(false);
    // 处理模态框默认隐藏
    const [visible2, setVisible2] = React.useState(false);
    // 点击查看模态框出现
    const showModal = () => {
        setVisible(true);
    };
    //   点击取消模态框消失
    const cancelText1 = () => {
        setVisible(false);
    };
    // 点击处理出来另一个模块框
    const okText1 = () => {
        setVisible(false);
        setVisible2(true);
    };


    // 点击处理出来另一个模块框
    const okText2 = () => {
        setVisible(false);
        setVisible2(false);
    }
    //   点击取消模态框消失
    const cancelText2 = () => {
        setVisible(false);
        setVisible2(false);
    };

    // 单选框
    const [value, setValue] = React.useState(1);

    const onChange = e => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };


    return (
        <>
            <Button type='link' onClick={showModal}>
                查看
            </Button>
            {/* 第一个模态框 */}
            <Modal
                height="100"
                title="查看"
                visible={visible}
                okText="处理"
                okType="button"
                cancelText="取消"
                onOk={okText1}
                onCancel={() => cancelText1()}
                footer={[
                    <Button onClick={okText1}>处理</Button>,
                    <Button onClick={cancelText1}>取消</Button>
                ]}
            >
                <div className="modal1-T">
                    <div className="tr">
                        <p>订单编号</p>
                        <p>申请时间</p>
                        <p>ID</p>
                        <p>姓名</p>
                        <p>服务类型</p>
                        <p>退款金额</p>
                        <p>陪护员</p>
                        <p>退款原因</p>
                        <p>状态</p>
                        <p>处理时间</p>
                        <p>处理结果</p>
                    </div>
                    <div className="td">
                        <p>{props.name.orderNum}</p>
                        <p>{props.name.ApplyTime}</p>
                        <p>{props.name.userId}</p>
                        <p>{props.name.userName}</p>
                        <p>{props.name.serviceType}</p>
                        <p>{props.name.refundCount}</p>
                        <p>{props.name.careName}</p>
                        <p>{props.name.cancelReason ? props.name.cancelReason : '-'}</p>
                        <p>{props.name.refundState ? props.name.refundState : '-'}</p>
                        <p>{props.name.resolveTime ? props.name.resolveTime : '-'}</p>
                        <p>{props.name.orderState ? props.name.orderState : '-'}</p>
                    </div>
                </div>
            </Modal>
            {/* 第二个模态框 */}
            <Modal
                title="处理"
                visible={visible2}
                onCancel={cancelText2}
                footer={[
                    <Button onClick={okText2}>确认</Button>,
                    <Button onClick={cancelText2}>取消</Button>
                ]}
            >
                <div className="Modalp">
                    <p >处理：</p>
                    <Radio.Group onChange={onChange} value={value}>
                        <Radio value={1}>同意退款</Radio>
                        <Radio value={2}>拒绝退款</Radio>
                    </Radio.Group>
                    <p>说明:</p>
                    <TextArea rows={4} />
                </div>
            </Modal>
        </>
    );
};
export default Handle;



